<script setup lang="ts">
  import { ref } from 'vue'
  import { useTimeoutTipForm, useSpecifyPersonOptions } from './services'
  import { FormInstance } from 'element-plus'

  const { form, submitLoading, submit, reset } = useTimeoutTipForm()
  const { specifyPersonOptions, getSpecifyPersonOptionsLoading, getSpecifyPersonOptions } =
    useSpecifyPersonOptions()

  const formRef = ref<FormInstance | null>(null)
  const rules = ref({
    type: [{ required: true, message: '请选择提醒方式', trigger: ['blur', 'change'] }],
    remindEmpType: [{ required: true, message: '请选择提醒人员', trigger: ['blur', 'change'] }],
    remindEmpIds: [{ required: false, message: '请选择指定人员', trigger: ['blur', 'change'] }],
    conditionType: [{ required: true, message: '请选择提醒内容', trigger: ['blur', 'change'] }],
  })

  const handleTipPersonChanges = (val: Array<number>) => {
    rules.value.remindEmpIds[0].required = false
    if (val.includes(4)) {
      getSpecifyPersonOptions('')
      rules.value.remindEmpIds[0].required = true
    } else {
      form.value.remindEmpIds = []
    }
  }

  defineExpose({
    submitLoading,
    submit: async (orderIds: Array<string>) => {
      if (!formRef.value) {
        return null
      }
      try {
        await formRef.value.validate()
        return await submit(orderIds)
      } catch (error) {
        return null
      }
    },
    reset: () => {
      if (!formRef.value) {
        return
      }
      formRef.value.resetFields()
      reset()
    },
  })
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    class="modal_form_content form_content"
    :rules="rules"
    label-position="top"
    inline-message
  >
    <el-form-item label="提醒方式" prop="type" class="same_line">
      <el-radio-group v-model="form.type">
        <el-radio size="small" :value="1">手动提醒</el-radio>
        <el-radio size="small" :value="2">按SLA规则提醒</el-radio>
      </el-radio-group>
    </el-form-item>

    <template v-if="form.type == 1">
      <el-form-item label="提醒人员" prop="remindEmpType">
        <el-select
          v-model="form.remindEmpType"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="3"
          @change="handleTipPersonChanges"
        >
          <el-option label="工单客服" :value="1" />
          <el-option label="部门负责人" :value="2" />
          <el-option label="工程师" :value="3" />
          <el-option label="指定人员" :value="4" />
        </el-select>
      </el-form-item>

      <el-form-item label="指定人员" prop="remindEmpIds">
        <el-select
          v-model="form.remindEmpIds"
          multiple
          clearable
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="3"
          :disabled="
            getSpecifyPersonOptionsLoading ||
            specifyPersonOptions.length <= 0 ||
            !form.remindEmpType.includes(4)
          "
        >
          <el-option
            v-for="emp in specifyPersonOptions"
            :key="emp.id"
            :value="emp.id"
            :label="emp.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="提醒内容" prop="conditionType">
        <el-select v-model="form.conditionType">
          <el-option label="未分配客服" :value="1" />
          <el-option label="未排单" :value="2" />
          <el-option label="部门未接单" :value="3" />
          <el-option label="工程师未接单" :value="4" />
          <el-option label="工程师未拨打电话" :value="5" />
          <el-option label="工程师未预约" :value="6" />
          <el-option label="工程师未签到" :value="7" />
        </el-select>
      </el-form-item>
    </template>
    <template v-else>
      <div>
        <p class="sla_rule_tip">
          选中工单将根据规则设置的触发条件提醒对应人员 <br />如需设置请到工单设置-SLA规则
        </p>
      </div>
    </template>
  </el-form>
</template>

<style scoped lang="scss">
  .sla_rule_tip {
    font-size: 12px;
    color: #999;
  }

  .form_content {
    padding-top: 12px;
  }
</style>
